<template>
  <div class="dashboard-editor-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />
    <div class="divBox">

    <el-row style="background:#fff;margin:20px 0;">
      <div class="panel-title">
        <el-col :span="12">
          <span>支付订单</span>
        </el-col>
        <el-col :span="12" class="align-right">
          <el-radio-group v-model="time3" size="mini" @change="getCurrentData(time3)">
            <el-radio-button v-for="item in timeList1" :key="item.value" :label="item.value">{{ item.label }}</el-radio-button>
          </el-radio-group>
        </el-col>
      </div>
      <line-chart ref="lineChart" :chart-data="lineChartData" :date="time3" />

  </el-row>




      <order-sumlist ref="orderSumlist" :chart-data="lineChartData" :date="time3"/>

    </div>
    </div>



</template>

<script>
import { integralOrderExcelApi, integralOrderDeleteApi } from "@/api/marketing";
import createWorkBook from '@/utils/newToExcel.js';
import timeOptions from '@/utils/timeOptions';
import {activityCateSelect, activityOrderLstApi} from "@/api/activity";
import { merSelectApi } from '@/api/product'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import OrderSumlist from './components/OrderSumlist'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
    payer: [100, 120, 98, 130, 150, 140, 180]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
    payer: [150, 90, 98, 130, 150, 140, 180]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
    payer: [150, 90, 98, 130, 150, 140, 180]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
    payer: [150, 90, 98, 130, 150, 140, 180]
  },
  followers: {
    expectedData: [150, 90, 98, 130, 150, 140, 180],
    actualData: [120, 82, 91, 154, 162, 140, 130],
    payer: [130, 140, 141, 142, 145, 150, 160]
  }
}
export default {
  name: 'ActivityReport',
  components: {
    PanelGroup,
    LineChart,
OrderSumlist
    },

    data() {
        return {
            select: "",
            keywords: "",
            orderId: 0,
            tableData: {
                data: [],
                total: 0,
            },
            pickerOptions: timeOptions,
            listLoading: true,
            tableFrom: {
                keywords: "",
                order_sn: "",
                status: "",
                date: "",
                page: 1,
                limit: 20,
                product_id: '',
            },
            merSelect: [],
            timeVal: [],
            ids: "",
            uid: "",
            visibleDetail: false,
            tableFromLog: {
                page: 1,
                limit: 10,
            },
            loading: false,
            dialogVisible: false,
            cardLists: [],
            orderDatalist: null,
            shipment: {
                delivery_type: 1
            },
            drawer: false,
            categoryList:[],

        value1: '',
        value2: '',
        time1: 'lately30',
        time2: 'lately30',
        time3: 'lately30',
        rankingTime1: 'year',
        rankingTime2: 'year',
        rankingTime3: 'year',
        lineChartData: lineChartData.newVisitis,
        isAmount: true,
        timeList: [
          { value: 'lately7', label: '近7天' },
          { value: 'lately30', label: '近30天' },
          { value: 'month', label: '本月' },
          { value: 'year', label: '本年' }
        ],
        timeList1: [
          { value: 'lately7', label: '近7天' },
          { value: 'lately30', label: '近30天' },
          { value: 'month', label: '本月' },
          { value: 'year', label: '本年' }
        ],
        commodityPaymentList: [],
        visitorRankingList: [],
        productPlusList: [],
        orderCustomer: {}
        };
    },
    watch: {
        '$route.query.id': {
            handler: function(val) {
                this.tableFrom.product_id  = val || ""
                this.getList('');
            },
            immediate: false,
            deep: true
        },
    },
    mounted() {
        if (this.$route.query.id) {
            this.tableFrom.product_id = this.$route.query.id;
        } else {
            this.tableFrom.product_id = "";
        }
        this.getCurrentData() // 支付订单
        this.getMerSelect();
        this.getCategoryList()
    },



    // 被缓存接收参数
    activated() {
        if (this.$route.query.id) {
            this.tableFrom.product_id = this.$route.query.id;
        } else {
            this.tableFrom.product_id = "";
        }
      //  this.getList('');
    },
    methods: {
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      getCurrentData() {
        this.$refs.lineChart.getOrderData({ date: this.time3 })
        //this.$refs.orderSumlist.getList('');

      },
        getCategoryList() {
            activityCateSelect()
                .then(res => {
                    this.categoryList = res.data
                })
                .catch(res => {
                    this.$message.error(res.message)
                })
        },
        // 商户列表；
        getMerSelect() {
            // merSelectApi()
            //     .then((res) => {
            //         this.merSelect = res.data;
            //     })
            //     .catch((res) => {
            //         this.$message.error(res.message);
            //     });
        },
        /**重置 */
        searchReset(){
            this.timeVal = []
            this.tableFrom.date = ""
            this.tableFrom.order_sn = ""
            this.tableFrom.nickname = ""
            this.tableFrom.activity_name = ""
            this.keywords = ""
            this.$refs.searchForm.resetFields()
            this.changeSearch()
        },
        // 订单核销
        handleVerify(row, idx) {
            this.$modalSure('确定核销改订单？').then(() => {
                activityOrderVerifyApi(row.order_id).then(({ message }) => {
                    this.$message.success(message)
                    this.getList('');
                }).catch(({ message }) => {
                    this.$message.error(message)
                })
            })
        },
        async exports() {
            let excelData = JSON.parse(JSON.stringify(this.tableFrom)), data = []
            excelData.page = 1
            let pageCount = 1
            let lebData = {};
            for (let i = 0; i < pageCount; i++) {
                lebData = await this.downData(excelData)
                pageCount = Math.ceil(lebData.count/excelData.limit)
                if (lebData.export.length) {
                    data = data.concat(lebData.export)
                    excelData.page++
                }
            }
            createWorkBook(lebData.header, lebData.title, data, lebData.foot,lebData.filename);
            return
        },
        /**订单列表 */
        downData(excelData) {
            return new Promise((resolve, reject) => {
                integralOrderExcelApi(excelData).then((res) => {
                    return resolve(res.data)
                })
            })
        },
        // 详情
        onOrderDetails(id) {
            this.orderId = id;
            this.$refs.orderDetail.getInfo(id);
            this.drawer = true;
        },
        changeDrawer(v) {
            this.drawer = v;
        },
        closeDrawer() {
            this.drawer = false;
        },
        pageChangeLog(page) {
            this.tableFromLog.page = page;
            this.getList('');
        },
        handleSizeChangeLog(val) {
            this.tableFromLog.limit = val;
            this.getList('');
        },
        // 具体日期
        onchangeTime(e) {
            this.timeVal = e;
            this.tableFrom.date = e ? this.timeVal.join('-') : '';
            this.changeSearch();
        },
        changeSearch(){
            this.resetSearchVal();
            this.getList(1);
        },
        resetSearchVal(){
            this.tableFrom.phone="";
            this.tableFrom.uid="";
            this.tableFrom.keywords="";
        },
        // 列表
        getList(num) {
            this.listLoading = true;
            this.tableFrom.page = num ? num : this.tableFrom.page;
            activityOrderLstApi(this.tableFrom)
                .then((res) => {
                    this.tableData.data = res.data.list;
                    this.tableData.total = res.data.count;
                    this.listLoading = false;
                })
                .catch((res) => {
                    this.$message.error(res.message);
                    this.listLoading = false;
                });
        },
        pageChange(page) {
            this.tableFrom.page = page;
            this.getList('');
        },
        handleSizeChange(val) {
            this.tableFrom.limit = val;
            this.getList('');
        },
    },
};
</script>

<style lang="scss" scoped>
.demo-table-expand ::v-deep label {
    width: 83px !important;

}
::v-deep .el-input-group__prepend .el-input{
    width: 90px;
}
::v-deep .el-input-group__prepend div.el-select .el-input__inner{
    padding: 0 10px;
    display: block;
    font-size: 13px;
}
.selWidth {
    width: 260px;
}
.el-dropdown-link {
    cursor: pointer;
    color: var(--prev-color-primary);
    font-size: 12px;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.tabBox_tit {
    width: 60%;
    font-size: 12px !important;
    margin: 0 2px 0 10px;
    letter-spacing: 1px;
    padding: 5px 0;
    box-sizing: border-box;
}
::v-deep .row-bg .cell {
    color: red !important;
}



$textColor: #8d8d8d;
.align-right {
  text-align: right;
}
/deep/.el-radio-button__inner{
  padding: 0;
  width: 62px;
  line-height: 25px;
}
.dashboard-editor-container {
  padding: 0 10px 10px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    margin-bottom: 20px;
    height: 330px;
  }
}
.panel-title {
  padding: 20px;
  color: #000;
  overflow: hidden;
  font-weight: bold;
  line-height: 36px;
}
.grid-content {
  margin-bottom: 2px;
  height: 100px;
  line-height: 30px;
  color: #2b2d2c;
  position: relative;
  overflow: hidden;
  font-size: 14px;
  .bg-color {
    padding: 20px;
  }
  .grid-count {
    display: block;
    font-weight: bold;
    font-size: 16px;
  }
}
.grid-floating {
  position: absolute;
  right: 0;
  font-size: 13px;
  font-weight: bold;
  z-index: 5;
  line-height: 35px;
  &:before {
    content: "";
    display: inline-block;
    width: 85px;
    height: 1px;
    background: #d8d8d8;
    position: absolute;
    top: 15px;
    left: -90px;
  }
  .grid-conversion-number {
    display: inline-block;
    width: 45px;
  }
  &:nth-child(1) {
    top: 85px;
  }
  &:nth-child(2) {
    top: 188px;
    &:before {
      width: 150px;
      left: -155px;
    }
  }
}
/deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner{
  color: #fff;
  background-color: #6394F9;
  border-color: #6394F9;
  -webkit-box-shadow: -1px 0 0 0 #6394F9;
  box-shadow: -1px 0 0 0 #6394F9;
}
.grid-title-count {
  background: #fff;
}
.select-icon-date {
  opacity: 0.6;
}
.grid-title {
  font-weight: bold;
  padding: 20px 0;
  margin: 0 20px;
  font-size: 14px;
  border-bottom: 1px solid #EBEEF5;
}
.bg-blue {
  background-color: #eff4fe;
}
.bg-green {
  background-color: #effbf6;
}
.bg-gray-dark {
  background-color: #eff1f4;
}
.grid-list-content {
  background: #fff;
  padding: 15px;
  height: 388px;
  overflow: hidden;
  .el-row {
    margin-bottom: 6px;
    border-bottom: 1px solid #EBEEF5;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .grid-list {
    padding: 13px;
    &:first-child {
      span {
        display: block;
        width: 18px;
        line-height: 18px;
        text-align: center;
        color: #fff;
        border-radius: 100%;
        -webkit-border-radius: 100%;
        font-size: 12px;
        &.navy-blue {
          background: #D0D0D0;
        }
        &.gray0 {
          background: #EBCA80;
        }
        &.gray1 {
          background: #ABB4C7;
        }
        &.gray2 {
          background: #CCB3A0;
        }
      }
    }
    &:nth-child(2) {
      position: relative;
      padding-left: 50px;
      span {
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
      }
      img {
        width: 30px;
        height: 30px;
        position: absolute;
        left: 0;
        top: 7px;
        border-radius: 2px;
      }
    }
    &:last-child {
      font-size: 13px;
      color: #000000;
    }
  }
}
.pieChart-switch {
  font-size: 0;
  position: absolute;
  top: 80px;
}
.pieChart-switch .el-button {
  display: inline-block;
  line-height: 22px;
  color: #000000;
  text-align: center;
  font-size: 14px;
  padding: 0;
  border: none;
  position: relative;
  margin: 0 15px;
  &:hover,&:focus{
    background: transparent;
  }
  &.active{
    color: #6394F9;
    &::after{
      content: "";
      display: inline-block;
      width: 100%;
      height: 2px;
      background: #6394F9;
      position: absolute;
      left: 0;
      bottom: -2px;
    }
  }

}
/deep/ .align-right .el-input__inner {
  border: none;
  padding: 0 5px;
  width: 92px;
  color: $textColor;
}
.bg-trapezoid {
  position: absolute;
  left: 40%;
  top: 0;
  span {
    position: absolute;
    width: 50px;
    text-align: center;
  }
}
.blue-trapezoid {
  border-top: 100px solid #6395fa;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  span {
    color: #fff;
    top: -62px;
    left: 50%;
    margin-left: -30px;
  }
  &:hover {
    border-top-color: rgba(109, 156, 252, 1);
  }
}
.green-trapezoid {
  border-top: 400px solid #63daab;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  top: -265px;
  span {
    color: #fff;
    top: -103px;
    left: 50%;
    margin-left: -30px;
  }
  &:hover {
    border-top-color: rgba(109, 227, 180, 1);
  }
}
.gray-dark-trapezoid {
  border-top: 670px solid #657798;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  top: -510px;
  span {
    color: #fff;
    top: -125px;
    left: 50%;
    margin-left: -24px;
  }
  &:hover {
    border-top-color: rgba(123, 143, 179, 1);
  }
}
@media (max-width: 1800px) {
  .blue-trapezoid {
    border-top: 150px solid #6395fa;
    border-left-width: 70px;
    border-right-width: 70px;
    span {
      top: -109px;
    }
  }
  .green-trapezoid {
    border-top-width: 316px;
    border-left-width: 80px;
    border-right-width: 80px;
    top: -180px;
    span {
      top: -94px;
    }
  }
  .gray-dark-trapezoid {
    border-top-width: 545px;
    border-left-width: 90px;
    border-right-width: 90px;
    top: -443px;
    span {
      top: -72px;
    }
  }
}
@media (max-width: 1600px) {
  .blue-trapezoid {
    border-top: 150px solid #6395fa;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
  }
  .green-trapezoid {
    border-top-width: 440px;
    border-left-width: 58px;
    border-right-width: 58px;
    top: -233px;
    span {
      top: -170px;
    }
  }
  .gray-dark-trapezoid {
    border-top-width: 455px;
    border-left-width: 60px;
    border-right-width: 60px;
    top: -332px;
    span {
      top: -85px;
    }
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
